<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">生活服务</el-breadcrumb-item>
                <el-breadcrumb-item class="up"><a @click="goTo('/Template')">模板商品</a></el-breadcrumb-item>
                <el-breadcrumb-item>编辑模板</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 用户信息 -->
            <div class="userinformation">
              <div class="title">基本信息</div>
              <div class="message">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="一级分类:">
                    <!-- <el-input v-model="form.parentId" clearable></el-input> -->
                    <el-select v-model="form.cname1" placeholder="请选择" @change="changeClassify1()">
                      <el-option
                        v-for="item in classify1"
                        :key="item.index"
                        :label="item.cname"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="二级分类:">
                    <!-- <el-input v-model="form.secondLevelId" clearable></el-input> -->
                    <el-select v-model="form.cname2" placeholder="请选择" @change="getClassify2()">
                      <el-option
                        v-for="item in classify2"
                        :key="item.index"
                        :label="item.cname"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="项目名称:">
                    <el-input v-model="form.mouldName" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="产品主图:">
                    <!-- 主图 -->
                    <div class="upload">
                      <el-upload class="uploadBox"
                        list-type="picture-card"
                        :file-list="fileListMainPic"
                        action
                        multiple
                        :limit="1"
                        :http-request="handleUploadMainPic"
                        :on-preview="handlePictureCardPreviewMainPic"
                        :on-remove="handleRemoveMainPic"
                        :class="{hide:hideUploadMainPic}">
                        <i class="el-icon-plus">主图</i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisibleMainPic">
                        <img width="100%" :src="dialogImageUrlMainPic" alt="">
                      </el-dialog>
                    </div>
                    <!-- 副图 -->
                    <div class="upload">
                      <el-upload class="uploadBox"
                        list-type="picture-card"
                        :file-list="fileListTopImgs"
                        action
                        multiple
                        :limit="3"
                        :http-request="handleUploadTopImgs"
                        :on-preview="handlePictureCardPreviewTopImgs"
                        :on-remove="handleRemoveTopImgs"
                        :class="{hide:hideUploadTopImgs}">
                        <i class="el-icon-plus">副图</i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisibleTopImgs">
                        <img width="100%" :src="dialogImageUrlTopImgs" alt="">
                      </el-dialog>
                    </div>
                  </el-form-item>
                  <el-form-item label="路费:">
                    <el-input v-model="form.fare" clearable></el-input>
                    <span>元</span>
                  </el-form-item>
                  <el-form-item label="起步价:">
                    <el-input v-model="form.flagFallPrice" clearable></el-input>
                    <span>元起</span>
                  </el-form-item>
                  <el-form-item label="标签:">
                    <el-checkbox-group v-model="label">
                        <el-checkbox v-for="city in taglist" :label="city.id" :key="city.name">{{city.name}}</el-checkbox>
                      </el-checkbox-group>
                  </el-form-item>
                  <!-- <el-form-item label="服务介绍:">
                    <el-input type="textarea" v-model="form.serviceIntroduction"></el-input>
                  </el-form-item> -->
                  <el-form-item label="服务介绍:">
                    <!-- 图片上传组件辅助-->
                    <el-upload class="avatar-uploader"
                      action
                      multiple
                      :limit="30"
                      :headers="header"
                      :show-file-list="false"
                      :before-upload="beforeUpload">
                    </el-upload>
                    <!--富文本编辑器组件-->
                    <el-row v-loading="quillUpdateImg">
                      <quill-editor
                        v-model="form.serviceIntroduction"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @change="onEditorChange($event)"
                        @ready="onEditorReady($event)">
                      </quill-editor>
                    </el-row>
                  </el-form-item>
                  <el-form-item label="预约须知:">
                    <!-- 图片上传组件辅助-->
                    <el-upload class="avatar-uploader avatar-uploader1"
                      action
                      multiple
                      :limit="30"
                      :headers="header"
                      :show-file-list="false"
                      :before-upload="beforeUpload1">
                    </el-upload>
                    <!--富文本编辑器组件-->
                    <el-row v-loading="quillUpdateImg1">
                      <quill-editor
                        v-model="form.appointmentNotice"
                        ref="myQuillEditors"
                        :options="editorOption1"
                        @change="onEditorChange($event)"
                        @ready="onEditorReady($event)">
                      </quill-editor>
                    </el-row>
                  </el-form-item>
                  <!-- <el-form-item label="预约须知:">
                    <el-input type="textarea" v-model="form.appointmentNotice"></el-input>
                  </el-form-item> -->
                  <el-form-item>
                    <el-button @click="onSubmit">保存</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  //quill编辑器的字体
  var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
  // 工具栏配置
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],
    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction
   // [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    //[{'header': [1, 2, 3, 4, 5, 6, false]}],
    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    //[{'font': fonts}],
    [{'align': []}],
    ['link', 'image', 'video'],
    ['clean']                                         // remove formatting button
  ]
  export default {
    name: 'TemplateDeatil',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        id:'',//商品模板id
        hideUploadMainPic: false,//隐藏主图上传图标的变量
        limitCountMainPic:1,//主图受限长度
        dialogImageUrlMainPic: '',//主图预览图片url
        dialogVisibleMainPic: false,//主图预览图片显示与否
        fileListMainPic: [],//主图图片列表
        hideUploadTopImgs: false,//隐藏副图上传图标的变量
        limitCountTopImgs:3,//副图受限长度
        dialogImageUrlTopImgs: '',//副图预览图片url
        dialogVisibleTopImgs: false,//副图预览图片显示与否
        fileListTopImgs: [],//副图图片列表
        header: {token: localStorage.getItem('token')},  // 有的图片服务器要求请求头需要有token之类的参数，写在这里
        quillUpdateImg: false,
        quillUpdateImg1: false,
        editorOption: {  // 富文本编辑器配置
          placeholder: '',
          theme: 'snow',  // or 'bubble'
          modules: {
            /* imageDrop: true,      //图片拖拽
            imageResize:{          //放大缩小
              displaySize: true
            }, */
            toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('.avatar-uploader input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },
        editorOption1: {  // 富文本编辑器配置
          placeholder: '',
          theme: 'snow',  // or 'bubble'
          modules: {
            /* imageDrop: true,      //图片拖拽
            imageResize:{          //放大缩小
              displaySize: true
            }, */
            toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('.avatar-uploader1 input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },
        classify1:[],//一级类目
        classify2:[],//二级类目
        taglist:[//标签
          {
            id:1,
            name:'时效保障'
          },
          {
            id:2,
            name:'明码标价'
          },
          {
            id:3,
            name:'超长保修'
          }
        ],
        label:[],//标签
        form:{
          cname1:'',//
          cname2:'',//
          mainPic:[],//主图
          topImgs:[],//副图
        },
      }
    },
    mounted() {
      this.id = JSON.parse(JSON.stringify(this.$route.query.data)); // 取到路由带过来的参数
      console.log("模板id：",this.id);
      this.findDetail();
    },
    methods: {
      // 路由
      goTo(path) {
        this.$router.push(path);
      },
      //根据id查询商品模板详情
      findDetail(){
        this.$axios.post(this.baseURL1+'admin/goodsMould/info',{
          "id":this.id,
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"商品模板详情");
          if(res.data.code==0){
            this.form = res.data.data;
            this.form.tag=this.form.tag.substring(0, this.form.tag.lastIndexOf(','))
            this.label = this.form.tag.split(',');//商品标签
            for(var i=0;i<this.label.length;i++){//将商品id转换成int类型
               this.label[i]= parseInt(this.label[i])
            }

            /* this.form.serviceIntroduction = this.form.serviceIntroduction.substring( this.form.serviceIntroduction.indexOf("<p>") + 3, this.form.serviceIntroduction.indexOf("</p>") - 0);//服务介绍
            this.form.appointmentNotice = this.form.appointmentNotice.substring( this.form.appointmentNotice.indexOf("<p>") + 3, this.form.appointmentNotice.indexOf("</p>") - 0);//预约须知 */

            this.form.cname1=this.form.parentId;//一级
            this.form.cname2=this.form.secondLevelId;//二级
            this.getClassify1();//一级
            this.getClassify2();//二级

            this.fileListMainPic.push({ url: res.data.data.topPic });//产品主图
            this.hideUploadMainPic = this.fileListMainPic.length >= this.limitCountMainPic;//如果主图存在隐藏上传图标
            if(res.data.data.otherPic){//产品副图列表
              //var otherPic = res.data.data.otherPic.split(",");
              var otherPic = res.data.data.otherPic.substring(0, res.data.data.otherPic.lastIndexOf(','));
              otherPic = otherPic.split(",");
              // console.log(otherPic,"其他图");

              for(var i=0;i<otherPic.length;i++){
                // console.log(otherPic[i],"其他图");
                this.fileListTopImgs.push({url:otherPic[i]})
                this.form.topImgs=this.fileListTopImgs
              }
            }
            this.hideUploadTopImgs = this.fileListTopImgs.length >= this.limitCountTopImgs;//如果副图存在隐藏上传图标

          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //根据一级id查询详情
      getClassify1(){
        this.$axios.post(this.baseURL1+'admin/goodsClassify/getAppGoodsClassifyList',{
          "parentId":0,
          "requestSource":"PC",
        }).then((res)=>{
          // console.log("所有一级类目",res)
          if(res.data.code==1){
            this.classify1 = res.data.data.records
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //更改一级类目的选项时
      changeClassify1(){
        console.log(this.form.cname1)
        this.form.cname2='';//先将类目二清空
        this.getClassify2()//获取二级分类
      },
      //根据二级id查询详情
      getClassify2(){
        this.$axios.post(this.baseURL1+'admin/goodsClassify/getAppGoodsClassifyList',{
          "parentId":this.form.cname1,
          "requestSource":"PC",
        }).then((res)=>{
          // console.log("所有二级类目",res)
          if(res.data.code==1){
            this.classify2 = res.data.data.records
            for(var i=0;i<=this.classify2.length;i++){
              if(this.form.secondLevelId=this.classify2[i].id){
                this.form.cname2 = this.classify2[i].id
              }
            }
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 获取阿里云签名
      getOssToken(){
        var _self = this;
        return new Promise((resolve,reject)=>{
          this.$axios.post(this.baseURL1+'getJsOssToken',{
            "requestSource":"PC"
          }).then(function(res){
            _self.aliyunOssToken = res.data.data;
            console.log(_self.aliyunOssToken,"通行证")
            resolve()
          }).catch(function(error){
            console.log(error);
          })
        })
      },
      // 主图上传图片
      handleUploadMainPic(option){
        // console.log(option,"上传的图片");
        this.getOssToken().then(res=>{
          var _self = this;
          var getSuffix = option.file.name;
          var filename = option.file.uid + getSuffix.substring(getSuffix.lastIndexOf("."),getSuffix.length);
          console.log(filename,'filename');
          var formData = new FormData();//注意formData里append添加的键的大小写
          formData.append('key', _self.aliyunOssToken.dir + filename); //存储在oss的文件路径
          formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid); //accessKeyId
          formData.append('policy', _self.aliyunOssToken.policy); //policy
          formData.append('Signature', _self.aliyunOssToken.signature); //签名
          formData.append("file", option.file);//文件
          formData.append('success_action_status', 200); //成功后返回的操作码
          var url = _self.aliyunOssToken.host; //url
          var fileUrl = _self.aliyunOssToken.host +'/'+ _self.aliyunOssToken.dir + filename; //fileUrl文件路径
          this.$axios.post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then((res) => {
            if(res.status==200){
              this.$message({
                message: '上传成功',
                type: 'success'
              });
              this.fileListMainPic.push({ url: fileUrl });
              this.hideUploadMainPic = this.fileListMainPic.length >= this.limitCountMainPic;//隐藏上传图标
            }else{
              this.$message.error('上传失败！请重新上传');
            }
          })
          .catch((err) => {
             console.log("err:",err);
             this.$message.error('上传失败！请重新上传');
          })
        })
      },
      // 主图移除图片
      handleRemoveMainPic(file,fileList) {
        for(var j=0; j<this.fileListMainPic.length;j++){
          if(file.uid == this.fileListMainPic[j].uid ){
             this.fileListMainPic.splice(j,1);
          }
        }
        // console.log(this.fileListMainPic,"this.imgs删除更新后");
        this.hideUploadMainPic = this.fileListMainPic.length >= this.limitCountMainPic;//显示上传图标
      },
      // 主图预览图片
      handlePictureCardPreviewMainPic(file) {
        this.dialogImageUrlMainPic = file.url;
        this.dialogVisibleMainPic = true;
      },
      // 副图上传图片
      handleUploadTopImgs(option){
        // console.log(option,"上传的图片");
        this.getOssToken().then(res=>{
          var _self = this;
          var getSuffix = option.file.name;
          var filename = option.file.uid + getSuffix.substring(getSuffix.lastIndexOf("."),getSuffix.length);
          // console.log(filename,'filename');
          var formData = new FormData();//注意formData里append添加的键的大小写
          formData.append('key', _self.aliyunOssToken.dir + filename); //存储在oss的文件路径
          formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid); //accessKeyId
          formData.append('policy', _self.aliyunOssToken.policy); //policy
          formData.append('Signature', _self.aliyunOssToken.signature); //签名
          formData.append("file", option.file);//文件
          formData.append('success_action_status', 200); //成功后返回的操作码
          var url = _self.aliyunOssToken.host; //url
          var fileUrl = _self.aliyunOssToken.host +'/'+ _self.aliyunOssToken.dir + filename; //fileUrl文件路径
          this.$axios.post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then((res) => {
            // console.log(res,"res");
            if(res.status==200){
              this.$message({
                message: '上传成功',
                type: 'success'
              });
              this.fileListTopImgs.push({ url: fileUrl });
              this.form.topImgs = this.fileListTopImgs;
              this.hideUploadTopImgs  = this.fileListTopImgs.length >= this.limitCountTopImgs;//隐藏上传图标
            }else{
              this.$message.error('上传失败！请重新上传');
            }
          })
          .catch((err) => {
             console.log("err:",err);
             this.$message.error('上传失败！请重新上传');
          })
        })
      },
      // 副图移除图片
      handleRemoveTopImgs(file,fileList) {
        for(var j=0; j<this.fileListTopImgs.length;j++){
          if(file.uid == this.fileListTopImgs[j].uid ){
             this.fileListTopImgs.splice(j,1);
          }
        }
        console.log(this.fileListTopImgs,"this.imgs删除更新后");
        this.form.topImgs = this.fileListTopImgs;
        this.hideUploadTopImgs = this.fileListTopImgs.length >= this.limitCountTopImgs;//显示上传图标
      },
      // 副图预览图片
      handlePictureCardPreviewTopImgs(file) {
        this.dialogImageUrlTopImgs = file.url;
        this.dialogVisibleTopImgs = true;
      },
      onEditorReady(){},
      onEditorChange(){},
      // 服务介绍---上传图片
      beforeUpload(option){
        this.getOssToken().then(res=>{
          this.quillUpdateImg = true
          var _self = this;
          var getSuffix = option.name;
          var filename = option.uid + getSuffix.substring(getSuffix.lastIndexOf("."),getSuffix.length);
          // console.log(filename,'filename');
          var formData = new FormData();//注意formData里append添加的键的大小写
          formData.append('key', _self.aliyunOssToken.dir + filename); //存储在oss的文件路径
          formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid); //accessKeyId
          formData.append('policy', _self.aliyunOssToken.policy); //policy
          formData.append('Signature', _self.aliyunOssToken.signature); //签名
          formData.append("file", option);//文件
          formData.append('success_action_status', 200); //成功后返回的操作码
          var url = _self.aliyunOssToken.host; //url
          var fileUrl = _self.aliyunOssToken.host +'/'+ _self.aliyunOssToken.dir + filename; //fileUrl文件路径
          this.$axios.post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then((res) => {
            console.log(res,"res");// res为图片服务器返回的数据
            let quill = this.$refs.myQuillEditor.quill// 获取富文本组件实例
            if (res.status == 200) { // 如果上传成功
                let length = quill.getSelection().index;// 获取光标所在位置
                quill.insertEmbed(length, 'image', fileUrl) // 插入图片  res.info为服务器返回的图片地址
                quill.setSelection(length + 1) // 调整光标到最后
            } else {
                this.$message.error('图片插入失败')
            }
            this.quillUpdateImg = false // loading动画消失
          })
          .catch((err) => {
             console.log("err:",err);
             this.quillUpdateImg = false// loading动画消失
             this.$message.error('图片插入失败')
             // this.$message.error('上传失败！请重新上传');
          })
        })
      },
      // 预约须知---上传图片
      beforeUpload1(option){
        this.getOssToken().then(res=>{
          this.quillUpdateImg1 = true
          var _self = this;
          var getSuffix = option.name;
          var filename = option.uid + getSuffix.substring(getSuffix.lastIndexOf("."),getSuffix.length);
          // console.log(filename,'filename');
          var formData = new FormData();//注意formData里append添加的键的大小写
          formData.append('key', _self.aliyunOssToken.dir + filename); //存储在oss的文件路径
          formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid); //accessKeyId
          formData.append('policy', _self.aliyunOssToken.policy); //policy
          formData.append('Signature', _self.aliyunOssToken.signature); //签名
          formData.append("file", option);//文件
          formData.append('success_action_status', 200); //成功后返回的操作码
          var url = _self.aliyunOssToken.host; //url
          var fileUrl = _self.aliyunOssToken.host +'/'+ _self.aliyunOssToken.dir + filename; //fileUrl文件路径
          this.$axios.post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then((res) => {
            console.log(res,"res");// res为图片服务器返回的数据
            let quill = this.$refs.myQuillEditors.quill// 获取富文本组件实例
            if (res.status == 200) { // 如果上传成功
                let length = quill.getSelection().index;// 获取光标所在位置
                quill.insertEmbed(length, 'image', fileUrl) // 插入图片  res.info为服务器返回的图片地址
                quill.setSelection(length + 1) // 调整光标到最后
            } else {
                this.$message.error('图片插入失败')
            }
            this.quillUpdateImg1 = false // loading动画消失
          })
          .catch((err) => {
             console.log("err:",err);
             this.quillUpdateImg1 = false// loading动画消失
             this.$message.error('图片插入失败')
             // this.$message.error('上传失败！请重新上传');
          })
        })
      },
      // 提交表单
      onSubmit() {
        console.log(this.form,"提交表单");
        console.log(this.fileListMainPic,"一图");
        console.log(this.fileListTopImgs,"其他图");
        console.log(this.label,"标签");
        var url ='';//其他图片
        for(var i =0; i < this.fileListTopImgs.length; i++){
          url += this.fileListTopImgs[i].url+ ","
        }
        console.log(url)
        var label = '';//标签
        for(var i = 0; i < this.label.length; i++){
          label += this.label[i]+ ","
        }
        console.log("标签",label)
        /* this.form.serviceIntroduction = this.form.serviceIntroduction.substring( this.form.serviceIntroduction.indexOf("<p>") + 3, this.form.serviceIntroduction.indexOf("</p>") - 0);//服务介绍
        this.form.appointmentNotice = this.form.appointmentNotice.substring( this.form.appointmentNotice.indexOf("<p>") + 3, this.form.appointmentNotice.indexOf("</p>") - 0);//预约须知 */

        this.$axios.post(this.baseURL1+'admin/goodsMould/edit',{
          "requestSource":"PC",
          "id":this.form.id,
          "parentId":this.form.cname1,//一级类目
          "secondLevelId":this.form.cname2,//二级类目
          "mouldName":this.form.mouldName,//项目名称
          "topPic":this.fileListMainPic[0].url,//主图
          "otherPic":url,//其他图
          "fare":this.form.fare,//路费
          "flagFallPrice":this.form.flagFallPrice,//起步价
          "tag":label,//标签
          "serviceIntroduction":this.form.serviceIntroduction,//服务介绍
          "appointmentNotice":this.form.appointmentNotice,//预约须知
          "status":this.form.status,//状态
        }).then((res)=>{
          console.log(res,"编辑商品模板详情");
          if(res.data.code==0){
            this.$message({
              type: 'success',
              message: '保存成功'
            });
            this.$router.go(-1);//返回上一层
          }else{
            this.$message.error(res.data.msg);
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .message{
    .reselection{
      color: #fc7656;
      padding-left: 20px;
      font-size: 10px;
      cursor: pointer;
    }
    .medium_div{
      margin-bottom: 15px;
    }
    .property{
      margin-bottom: 15px;
    }
    >>> .small_title{
      min-width: 60px;
      line-height: 1;
      display: inline-block;
      color: #a2a2a2;
    }
    >>> .el-form-item{
      margin-bottom: 12px;
    }
    >>> .el-form-item__label{
      color: #333333;
      line-height: 35px;
    }
    >>> .el-form-item__content{
      line-height: 35px;
    }
    >>> .el-upload--picture-card,
    >>> .el-upload-list--picture-card .el-upload-list__item{
      width: 60px;
      height: 60px;
      line-height: 60px;
    }
    >>> .el-input,
    >>> .el-textarea{
      width: 200px;
      .el-input__inner{
        height: 35px;
        line-height: 35px;
      }
    }
    >>> .el-textarea{
      width: 400px;
      min-height: 100px;
    }
    >>> .el-button{
      background-color: #fc7656;
      color: #fff;
      height: 35px;
      padding: 0px 20px;
    }
    .tips{
      display: inline-block;
      font-size: 10px;
      color: #FC7656;
      line-height: 35px;
    }
    .imgs{
      width: 100%;
      height: auto;
      // border: 2px solid green;
      div{
        display: inline-block;
        img{
          width: 80px;
          height: 80px;
        }
        .mainimg{
          border: 1px solid #fc7656;
        }
        p{
          text-align: center;
          line-height: 15px;
          cursor: pointer;
        }
      }
    }
    .select{
      width: 200px;
      height: 35px;
      line-height: 35px;
      padding: 0 15px;
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      box-sizing: border-box;
      outline: none;
      appearance:none;//不显示下拉箭头
    }
    .block{
      // min-width: 500px;
      max-height: 300px;
      overflow: hidden;
      border: #CFCFCF 1px solid;
      box-sizing: border-box;
      width: 150px;
      display: inline-block;
      p{
        line-height: 25px;
        padding-left: 20px;
        box-sizing: border-box;
        cursor: pointer;
        // display: inline-block;
      }
      p:hover{
        color: #FC7656;
      }
      >>> .el-cascader-menu{
        min-width: 250px;
      }
      >>> .el-cascader-node__postfix{
        right: 30px;
      }
      >>> .el-cascader-menu__wrap{
        height: 150px;
      }
    }
    .mainPic{
      display: inline-block;
      position: relative;
      .upload_input{
        opacity: 0;
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .mainimg{
        border: 1px solid #fc7656;
      }
      img{
        width: 80px;
        height: 80px;
      }
      p{
        width: 80px;
        font-size: 10px;
        text-align: center;
        line-height: 15px;
        cursor: pointer;
      }
    }
    .introduce{
      // display: inline-block;
      .small_title{
        display: inline-block;
        width: 50px;
        min-height: 50px;
      }
      .introduce_text{
        min-width: 500px;
      }
      .introduce_title{
        width: 50px;
        height: 150px;
        float: left;
      }
      .introduce_img{
        display: inline-block;
        min-width: 500px;
        min-height: 150px;
        padding: 5px 15px;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        border-radius: 4px;
        margin-left: 4px;
        >>> .el-upload-list__item-status-label{
          display: none;
        }
      }
    }
  }
  .upload{
    width: auto;
    min-height: 60px;
    display: inline-block;
    // border: 2px solid red;
    box-sizing: border-box;
    .uploadBox{
      height: 60px;
    }
    >>> .el-upload--picture-card{
      width: 60px;
      height: 60px;
      line-height: 60px;
      position: relative;
      i{
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        margin: auto;
        font-size: 12px;
        u{
          display: inline-block;
          text-decoration: none;
        }
      }
    }
    >>>.el-upload-list__item{
      width: 60px;
      height: 60px;
    }
    >>> .el-upload-list__item-status-label{
      display: none;
    }
    .el-upload__tip{
      color: #FC7656;
      line-height: 20px;
      margin-left: 0;
      display: inline-block;
    }
    .mainPic{
      display: inline-block;
      min-width: 60px;
      font-size: 10px;
      text-align: center;
    }
    .hide{
      >>> .el-upload--picture-card{
        display: none;
      }
    }
  }
  >>> .el-row{
    width: 850px;
  }
  .avatar-uploader{
    >>> .el-upload-list--picture-card .el-upload-list__item{
      width: 60px;
      height: 60px;
      line-height: 60px;
    }
    >>> .el-upload--picture-card{
      display: none;
    }
  }
  // 进度条
  .pic_img{
    width: auto;
    height: auto;
    // border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    .pic_img_box{
      max-width: 600px;
      max-height: 200px;
      // border: 1px solid seagreen;
      box-sizing: border-box;
      .video{
        width: auto;
        max-height: 150px;
      }
      .up_icon{
        width: 60px;
        height: 60px;
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        text-align: center;
        line-height: 60px;
        color: #8c939d;
        font-size: 12px;
        vertical-align:top
      }
      .line_progress{
        max-height: 200px;
      }
    }
    .tip{
      line-height: 20px;
      padding-left: 10px;
      padding-top: 10px;
      font-size: 12px;
      padding: 0;
      .tip_text{
        display: block;
        font-style: normal;
        line-height: 20px;
        padding-left: 10px;
      }
    }
  }
  // 进度条
  >>> .el-progress-bar{
    // width: 100px;
    background-color: transparent;
    font-size: 12px;
  }
  >>> .el-progress-bar__outer{
    background-color: transparent!important;
    border: 1px solid #CCCCCC!important;
  }
  >>> .el-progress__text{
    font-size: 10px!important;
  }
  >>> .ql-container.ql-snow{
    height: 150px;
  }
  // >>> .ql-editor{
  //   height: 3rem!important;
  // }
  .quill-editor:not(.bubble) .ql-container,
  .quill-editor:not(.bubble) .ql-container .ql-editor {/* 富文本编辑器类容高度 */
    height: 10rem;
    width: 53.125rem;
    padding-bottom: 1rem;
  }
  .ql-snow .ql-tooltip{
    top: 0!important;
    left: 0!important;
  }
</style>
